<template>
  <div class="dingdanlaiyuan">

    <div style="background: #fff;" v-loading="loading">
      <div style="padding: 0px 20px 20px 20px;">
        <div class="content">
          <div><el-input v-model="pageObj.source_name" placeholder="请输入订单来源"></el-input></div>
          <div class="content-channel">
            <el-select v-model="pageObj.channel_name" clearable placeholder="请选择渠道分类" filterable>
              <el-option  v-for="item in infoArrar" :key="item.channel_name"
                :label="item.channel_name"
                :value="item.channel_name">
              </el-option>
            </el-select>
          </div>
          <div class="content-button">
            <el-button type="info" plain @click="onClear">清空</el-button>
            <el-button type="primary" plain @click="onSearch">搜索</el-button>
          </div>
        </div>
        <div
          style=" padding: 20px; background: #f7f9fc; color: #51a3fb; font-size: 14px; line-height: 25px;margin-bottom: 20px;">
          说明：用户导单\H5商城、API接口提单等方式会产生诸多订单来源，如果您有新的来源请及时在此处添加，{{ moban.platform_name }}自动抓单的来源无需添加，默认存在。</br>
          作用：添加订单来源后可以在报表统计、短信中心和外呼等多处引用，有利于您更好的筛选和统计销售数据。
        </div>
        <el-button type="primary" round @click="logshow2" style="background-color: #fef1f5;color: #f72b50;">添加来源</el-button>
      </div>

      <div style="padding:0 20px;">
        <el-table :data="list2" border style="width: 100%">
          <el-table-column prop='source_name' label="订单来源"></el-table-column>
          <el-table-column prop='channel_name' label="销售渠道分类"></el-table-column>
          <el-table-column prop='created_at' label="添加时间"></el-table-column>
          <el-table-column prop='source_remark' label="备注说明"></el-table-column>
          <el-table-column prop='seller_id' label="集运提单编码">
            <template slot-scope="scope">
              <el-button type="text" @click="peizhi(scope.row)">配置</el-button>
            </template>
          </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="bianji(scope.row)">编辑</el-button>
              <el-button type="text" @click="shanchulaiyuan(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="fenye" style="padding: 20px; text-align: right;">
          <el-pagination background layout="total, sizes, prev, pager, next, jumper" :page-sizes="[5, 10, 20, 50]"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageObj.page"
            :page-size="pageObj.page_size" :total="pageObj.total"></el-pagination>
        </div>
      </div>


      <el-dialog title="配置集运提单编码" center :visible.sync="log2" width="600px" :close-on-click-modal="false"
        :close-on-press-escape="false">
        <el-button type="primary" round style="margin-bottom: 20px;" @click="log3show">添加渠道提单编码</el-button>
        <el-table :data="dangqian.seller_id" border style="width: 100%">
          <el-table-column prop='channel_name' label="接口渠道"></el-table-column>
          <el-table-column prop='source' label="集运提单编码"></el-table-column>
          <!-- <el-table-column prop='created_at' label="添加时间"></el-table-column> -->
          <el-table-column label="操作">
            <template slot-scope="scope">
              <!-- <el-button type="text" @click="bianji2(scope.row,scope.$index)">编辑</el-button> -->
              <el-button type="text" @click="shanchu2(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

      </el-dialog>

      <el-dialog title="配置集运提单编码" center :visible.sync="log3" width="600px" :close-on-click-modal="false"
        :close-on-press-escape="false">

        <div class="kflexcc" style="margin-bottom: 20px;">
          <div class="f1" style="text-align: right;">集运提单编码：</div>
          <div class="f2"><el-input style="width: 300px;" type="text" placeholder="请输入集运提单编码"
              v-model="dangqianadd.seller_id.source"></el-input></div>
        </div>
        <div class="kflexcc">
          <div class="f1" style="text-align: right;">所属渠道：</div>
          <div class="f2">
            <el-select v-model="dangqianadd.seller_id.channel_id" filterable clearable style="width: 300px;"
              placeholder="请选择所属渠道">
              <el-option v-for="item in qudaolist" :key="item.channel_id" :label="item.c_name"
                :value="item.channel_id"></el-option>
            </el-select>
          </div>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button type="primary" round @click="log3 = false">关闭</el-button>
          <el-button type="primary" round @click="add3">确定</el-button>
        </span>
      </el-dialog>


      <el-dialog title="添加来源" center :visible.sync="log" width="600px" :close-on-click-modal="false"
        :close-on-press-escape="false">

        <div class="kflexcc" style="margin-bottom: 20px;">
          <div class="f1" style="text-align: right;">来源名字：</div>
          <div class="f2"><el-input style="width: 300px;" type="text" placeholder="请输入来源名字"
              v-model="all2.source_name"></el-input></div>
        </div>
        <!-- <div class="kflexcc" style="margin-bottom: 20px;">
          <div class="f1" style="text-align: right;">集运提单编码：</div>
          <div class="f2"><el-input style="width: 300px;" type="text" placeholder="请输入集运提单编码" v-model="all2.seller_id"></el-input></div>
        </div> -->
        <div class="kflexcc">
          <div class="f1" style="text-align: right;">所属渠道：</div>
          <div class="f2">
            <el-select v-model="all2.channel_id" filterable clearable style="width: 300px;" placeholder="请选择所属渠道">
              <el-option v-for="item in list" :key="item.id" :label="item.channel_name" :value="item.id"></el-option>
            </el-select>
          </div>
        </div>
        <div style="text-align: center; margin: 20px 0;">找不到适合的渠道分类请先<router-link
            to="/setup/dingdanlaiyuan/xiaoshouqudao" style="color: #409EFF; margin-left: 10px;">前往创建</router-link></div>

        <div class="kflexcc" style="margin-bottom: 20px;">
          <div class="f1" style="text-align: right;">备注说明：</div>
          <div class="f2"><el-input style="width: 300px;" type="text" placeholder="请输入备注说明"
              v-model="all2.source_remark"></el-input></div>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button type="primary" round @click="add2">确定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: 'dingdanlaiyuan',
  data() {
    return {


      all: {
        channel_name: "",
        id: ""
      },
      all2: {
        title: "",
        channel_id: "",
        id: "",
        source_remark: "",
        seller_id: ""
      },
      list: [],
      infoArrar:[],
      pageObj: {
        page: 1,
        page_size: 20,
        total: 0,
        channel_name: "",
        source_name: "",
      },
      list2: [],
      total: 0,
      loading: false,
      log: false,
      log2: false,
      log3: false,

      dangqian: {
        seller_id: []
      },
      dangqianadd: {
        id: "",
        seller_id: {
          "channel_id": "",
          "channel_name": "",
          "source": ""
        }
      },
      search: {
        page: 1,
        page_size: 20
      },
      qudaolist: []
    }
  },
  created() {
    this.getlist()
    this.getlist2()
    this.getChannelInfo()
    axios.get('/api/plan-market/upstream/channel/config/list')
      .then(response => {
        if (response.data.msg.code == 0) {
          this.qudaolist = response.data.data
        } else {
          this.$message.error(response.data.msg.info);
        }
      })
  },
  methods: {
    onClear(){
      this.pageObj = {}
      this.pageObj.page = 1
      this.getlist2()
    },
    onSearch() {
      this.pageObj.page = 1
      this.getlist2()
    },
    getChannelInfo () {
      axios.get('/api/form/channel/sources/channel_name')
        .then(response => {
          if (response.data.msg.code == 0) {
            this.infoArrar = response.data.data
          } else {
            this.$message.error(response.data.msg.info);
          }
        })
    },
    shanchu2: function (item) {
      let obj = {
        id: this.dangqianadd.id,
        channel_id: item.channel_id
      }
      axios.post('/api/form/upstream-channel/sources/delete', obj)
        .then(response => {
          if (response.data.msg.code == 0) {
            this.$message.success('删除成功');
            this.log2 = false
            this.getlist2()
            this.log3 = false
          } else {
            this.$message.error(response.data.msg.info);
          }
        })
    },
    bianji2: function (item, index) {

      this.dangqianadd.seller_id = {
        "channel_id": item.channel_id,
        "channel_name": item.channel_name,
        "source": item.source
      }
      this.log3 = true
    },
    log3show: function () {
      this.dangqianadd.seller_id = {
        "channel_id": "",
        "channel_name": "",
        "source": ""
      }
      this.log3 = true
    },
    add3: function () {

      this.qudaolist.forEach(item => {
        if (item.channel_id == this.dangqianadd.seller_id.channel_id) {
          this.dangqianadd.seller_id.channel_name = item.c_name
        }
      })

      let obj = {
        id: this.dangqianadd.id,
        seller_id: this.dangqianadd.seller_id
      }

      axios.post('/api/form/upstream-channel/sources/make', obj)
        .then(response => {
          if (response.data.msg.code == 0) {
            this.$message.success('保存成功');
            this.getlist2()
            this.log2 = false
            this.log3 = false
          } else {
            this.$message.error(response.data.msg.info);
          }
        })
    },
    peizhi: function (item) {

      this.dangqian = JSON.parse(JSON.stringify(item))

      this.dangqianadd.id = item.id
      this.log2 = true

      // this.$router.push({
      //   path:'/setup/dingdanlaiyuan/dingdanlaiyuan/peizhi',
      //   query:{
      //     id:item.id,
      //     source_name:item.source_name
      //   }
      // })
    },
    shanchuqudao: function (item) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.post('/api/form/channel/delete', { id: item.id })
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message.success('已删除渠道！');
              this.getlist()
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      })
    },
    shanchulaiyuan: function (item) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.post('/api/form/source/delete', { id: item.id })
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message.success('已删除来源！');
              this.getlist2(this.all2.channel_id)
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      })
    },



    //获取列表
    getlist: function () {
      this.loading = true
      axios.get('/api/form/channels', this.search)
        .then(response => {
          if (response.data.msg.code == 0) {
            this.list = response.data.data.data
            this.list.forEach(item => {
              item.seller_id = []
            })
            this.total = response.data.data.total
            this.loading = false
          } else {
            this.$message.error(response.data.msg.info);
          }
        })
    },
    //翻页
    fanye: function (page) {
      this.page = page
      this.getlist2()
    },

    logshow2: function (item) {
      this.all2 = {
        title: "",
        channel_id: "",
        source_name: "",
        id: "",
        seller_id: ""
      }
      this.log = true
    },

    bianji: function (item) {
      this.all2 = {
        title: item.title,
        channel_id: item.channel_id,
        source_name: item.source_name,
        id: item.id,
        source_remark: item.source_remark,
        seller_id: item.seller_id
      }
      this.log = true
    },

    add2: function () {
      axios.post('/api/form/source/make', this.all2)
        .then(response => {
          if (response.data.msg.code == 0) {
            this.$message.success('保存成功');
            this.log = false
            this.getlist2()
          } else {
            this.$message.error(response.data.msg.info);
          }
        })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageObj.page_size = val
      this.pageObj.page = 1
      this.getlist2()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageObj.page = val

      this.getlist2()

    },
    getlist2: function (channel_id) {
      axios.get(`/api/form/channel/sources/list`, { params: this.pageObj })
        .then(response => {
          if (response.data.msg.code == 0) {
            const { total, data, per_page, current_page } = response.data.data
            this.list2 = data
            this.pageObj.total = total

            //给用户加默认
            if(total == 0){
              let all2 = {
                source_name: 'API1.0',
                source_remark: "默认规则",
              }
              axios.post('/api/form/source/make', all2)
                .then(response => {
                  if (response.data.msg.code == 0) {

                    setTimeout(()=>{

                      let all3 = {
                        source_name: 'WEBAPP',
                        source_remark: "默认规则",
                      }

                      axios.post('/api/form/source/make', all3)
                        .then(response => {
                          if (response.data.msg.code == 0) {
                            this.getlist2()
                          } else {
                            this.$message.error(response.data.msg.info);
                          }
                        })
                    },1000)


                  } else {
                    this.$message.error(response.data.msg.info);
                  }
                })



            }
          } else {
            this.$message.error(response.data.msg.info);
          }
        })
    },
    // getlist2: function(channel_id) {
    //     axios.get(`/api/form/channel/sources`)
    //       .then(response => {
    //         if (response.data.msg.code == 0) {
    //           this.list2 = response.data.data
    //         } else {
    //           this.$message.error(response.data.msg.info);
    //         }
    //       })
    //   },
  }
}
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  margin-bottom: 15px;

  &-channel {
    margin-left: 10px;
    margin-right: 10px;
  }

  &-button {
    margin-left: 20px;
  }
}

.dingdanlaiyuan {
  /deep/ .el-button--primary {
    color: #FFF;
    background-color: #2974FF;
    border-color: #2974FF;
  }
}

/deep/ .content .el-input__inner {
  width: 240px !important;
  background: #F3F5F8;
  border-radius: 10px;
  border: none;
}

.content .el-button {
  border-radius: 20px;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #2974FF;
    color: #FFF;
    border-radius: 15px;
}
/deep/ .el-pagination.is-background .el-pager li {
  border-radius: 15px;
  background-color: #f3f3f3;
}
</style>
